<template>
  <div>
    <y-header />
    <div class="person_body container account_cont clearfix" style="min-height: calc(100vh - 190px );">
      <y-side :type="'sygl'" />
      <div class="main_box">
        <ul class="tabs clearfix">
          <a class="tab on">实验列表</a>
        </ul>
        <div class="main_cont">
          <div v-if="notdata" class="notdata">
            <el-empty description="暂时没有数据" />
          </div>
          <table v-else class="course_table table">
            <tbody>
              <tr v-for="(item, index) in pageObj.list" :key="index">
                <td v-if="item">
                  <img :src="item.logo" :alt="item.mingcheng" :width="120" :height="80">
                  <div>
                    <div class="title">{{ item.mingcheng }}</div>
                    <br>
                    <br>
                    <div class="title">appid: {{ item.id }}</div>
                    <div class="title">secret: {{ item.secret }}</div>
                  </div>
                </td>
                <td style="float: right;margin-top: 10px">
                  <nuxt-link target="_blank" :to="{name: `experiment-accountmgn-id`, params: {id: item.id}}" :title="item.mingcheng" class="go_btn">数据</nuxt-link>
                </td>
              </tr>
            </tbody>
          </table>
          <d-page v-if="pageObj.totalPage > 1" :page="pageObj" @btnClick="getPage" />
        </div>
      </div>
    </div>
    <!-- <bottom /> -->
  </div>
</template>
<script>
import YSide from '~/components/account/Side'
import YHeader from '~/components/common/Header'
import DPage from '~/components/common/Page'
import { userExperimentMgnPage } from '@/api/user.js'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    YSide,
    DPage
  },
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      notdata: true,
      pageCurrent: 1,
      pageObj: {}
    }
  },
  head() {
    return {
      title: '个人中心-实验管理-' + this.$store.state.websiteInfo.websiteName
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getPage(int) {
      this.pageCurrent = int
      this.getList()
    },
    getList() {
      let lecturerId = null
      if (this.userInfo && this.userInfo.lecturer) {
        lecturerId = this.userInfo.lecturer.id
      }
      userExperimentMgnPage({ lecturerId, pageCurrent: this.pageCurrent, pageSize: 20 }).then(res => {
        if (res.totalCount > 0) {
          this.notdata = false
          this.pageObj = res
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import '~/assets/css/account.scss';
</style>
